<template>
  <div>
    <a-drawer title="以起草人身份操作" placement="right" :maskClosable="false" :closable="true" :visible="drafterVisible" @close="onclose" :width="576" class="checkDrawer">
      <div class="commonOpinion">
        <div class="title">
          常用意见： 
        </div>
        <div class="opinionBox">
          <div class="selectConetnt">
            <a-select v-model="selectDefaultValue" style="width: calc(100% - 16px);" @change="handleChange">
              <a-select-option v-for="(item, index) in selectData" :key="index" :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </div>
          <div class="custom">
            <a-button @click="showModal">自定义</a-button>
            <a-modal v-model="modalVisible" title="自定义处理意见" centered @cancel="modalVisible = false" v-if="modalVisible">
              <div style="margin-bottom: 1.5vh">自定义常用处理意见（每行一个）</div>
              <a-textarea
                style="width: 50vw"
                v-model="modalAreaValue"
                placeholder="请输入"
                :auto-size="{ minRows: 8, maxRows: 8 }"
              />
              <template slot="footer">
                <a-row>
                  <a-col :span="14" class="sync-content" 
                    style="font-size: 14px;color: #386BD7;display: flex;justify-content: flex-start;align-items: center;padding: 8px">
                  </a-col>
                  <a-col :span="10" style="padding-right: 18px">
                    <a-button @click="modalVisible = false">取消</a-button>
                    <a-button type="primary" @click="onSubmit">确定</a-button>
                  </a-col>
                </a-row>
              </template>
            </a-modal>
          </div>
        </div>
      </div>
      <div class="sayPeople">
        <div class="title">
          提出人：
        </div>
        <a-radio-group v-model="radioValue">
          <a-radio :value="item.value" v-for="(item,index) in radioList" :key="index">{{item.name}}</a-radio>
        </a-radio-group>
      </div>
      <div class="handOpinion">
        <div class="title">
          处理意见：
        </div>
        <a-textarea placeholder="请输入" :rows="4" style="width: 100%" v-model="handOpinionValue"></a-textarea>
      </div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="drafterClose">
          取消
        </a-button>
        <a-button type="primary" @click="drafterConfirm">
          确认
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>
<script>
  import {getCustomizeOpinions, putCustomizeOpinions, userinfo} from "@api/middleGround"
  import { creatorMake} from "@api/projectReview"
  export default {
    data() {
      return {
        // drafterVisible: false, // 起草人抽屉显示隐藏
        selectDefaultValue: '', // 起草人默认值
        /**常用意见参数 */
        selectData: [], // 下拉框数据
        /**自定义意见参数 */
        modalVisible: false,
        modalAreaValue: '',
        /**提出人按钮 */
        radioValue: '',
        radioList: [
          {
            name: "撤回",
            value: "撤回",
          },
          {
            name: "废弃",
            value: "废弃",
          }
        ],
        handOpinionValue: ''
      }
    },
    props: {
      drafterVisible: { // 起草人抽屉显示隐藏
        type: Boolean,
        default: false
      },
      nowDataStatus: { // 当前验收表信息
        type: Object,
        default: () => {}
      },
    },
    watch: {
      drafterVisible(val, oldVal) {
        if (val) {
          this.handOpinionValue = ''
          this.initData()
        }
      }
    },
    methods: {
      onclose() {
        this.$emit('drafterClose')
      },
      handleChange(value) {
        this.handOpinionValue = value
      },
      showModal() {
        this.modalVisible = true
      },
      onSubmit() {
        // this.modalVisible = false
        if (this.modalAreaValue == '') {
          this.$message.error('请输入意见！')
        } else {
          let parm =
            {
              "opinion": _.replace(this.modalAreaValue, /\r\n|\n|\r/g, ','),
              "userId": userinfo.loginName
            }
          putCustomizeOpinions(parm).then(res => {
            if (res.status === 200 && res.data) {
              this.modalVisible = false;
              this.getCustomizeOpinionsData()//刷新自定义意见
              this.$message.success('设置自定义意见成功！')
            } else {
              this.$message.error('设置自定义意见失败！')
            }
          })
        }
      },
      drafterClose() {
        this.$emit('drafterClose')
      },
      drafterConfirm() {
        let params = {
          oid: this.nowDataStatus.oid,
          userId: userinfo.loginName,
          comment: this.handOpinionValue,
          routeChoice: this.radioValue
        }
        creatorMake(params).then(res=>{
          if(res.status === 200){
            if(res.data.success){
              this.$message.success('操作成功')
              this.$emit('drafterConfirm')
            } else {
              this.$message.error('操作失败')
            }
          }
        })
        
      },
      initData() {
        this.getCustomizeOpinionsData()
      },
      //获取自定义审核意见
      getCustomizeOpinionsData() {
        let parm = {
          "userId": userinfo.loginName
        }
        getCustomizeOpinions(parm).then(res => {
          if (res.status === 200 && res.data) {
            if (res.data.opinion.length > 0) {
              this.selectData = res.data.opinion.split(',')
              this.modalAreaValue = _.replace(this.selectData.toString(), /,/g, '\r\n')
            } else {
              this.selectData = []
              this.modalAreaValue = ''
            }
          } else {
            this.$message.error('获取自定义意见失败！')
          }
        })
      },
    },
  }
</script>
<style scoped lang="less">
.checkDrawer {
  .sayPeople, .commonOpinion, .handOpinion {
    margin-bottom: 24px;
    .title {
      margin-bottom: 5px;
      font-size: 14px;
      color: #333;
    }
  }
  .commonOpinion {
    .opinionBox {
      display: flex;
      justify-content: space-between;
      .selectConetnt {
        width: 100%;
      }
      .custom {
      }
    }
  }
}
</style>